<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PointLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addText5",
    components: {L7MapWithGaode},
    setup() {

        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(7.5, [120.5, 30.2])

            const fontFamily = 'iconfont';
            const fontPath = `${window.location.origin}/antv-test/data/font/font_2534097_ao9soua2obv.woff2`;
            scene.addIconFonts([
                ['smallRain', '&#xe6f7;'],
                ['middleRain', '&#xe61c;'],
                ['hugeRain', '&#xe6a6;'],
                ['sun', '&#xe6da;'],
                ['cloud', '&#xe8da;']
            ]);
            scene.addFontFace(fontFamily, fontPath);

            fetch(`${window.location.origin}/antv-test/data/f7d083e2-ad55-44fd-b324-15e1b549948a.json`)
                .then(res => res.json())
                .then(data => {
                    const pointIconFontLayer = new PointLayer({})
                        .source(data, {
                            parser: {
                                type: 'json',
                                x: 'lng',
                                y: 'lat'
                            }
                        })
                        .shape('iconType', 'text')
                        .size(30)
                        .color('iconColor')
                        .style({
                            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                            textOffset: 'textOffset', // 文本相对锚点的偏移量 [水平, 垂直]
                            fontFamily,
                            iconfont: true,
                            textAllowOverlap: true
                        });
                    scene.addLayer(pointIconFontLayer);

                    const textLayer = new PointLayer({})
                        .source(data, {
                            parser: {
                                type: 'json',
                                x: 'lng',
                                y: 'lat'
                            }
                        })
                        .shape('weather', 'text')
                        .size(16)
                        .color('#073bf5')
                        .style({
                            textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                            textOffset: [0, 0], // 文本相对锚点的偏移量 [水平, 垂直]
                            spacing: 2, // 字符间距
                            padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
                            fontFamily: 'Times New Roman',
                            textAllowOverlap: true
                        });
                    scene.addLayer(textLayer);
                })
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
